import React from 'react'

// 导入UI组件
import { Spin, Alert, Pagination } from 'antd';

// 导入子组件
import MovieItem from './MovieItem'

export default class MovieList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            movies: [],
            nowPage: parseInt(props.match.params.page) || 1, //在第几页
            pageSize: 12, //每页有多少
            total: 0,   //当前分类，总共有多少电影
            isloading: true, //是否正在加载
            movieType: props.match.params.type  //电影类型
        }
    }

    componentWillMount() {

        //使用fetch进行数据请求，受到跨域的限制，

        //此时使用第三方包fetch-jsonp来进行数据的请求
        //（安装:npm i fetch-jsonp -S , 引入:import fetchJSONP froom 'fetch-jsonp' 
        //   使用方式和fetch一样）


        // fetch('http://www.liulongbin.top:3005/api/getlunbo')
        // .then(response => {  //第一个.then得到response对象，不是数据，通过调用response.json()返回一个promise对象，
        //     return response.json()
        // })
        // .then(data => {  //第二个.then获取到的就是真正的数据了
        //     console.log(data);
        // })

        // setTimeout(()=>{  //模拟异步请求
        //     this.setState({
        //         isloading:false
        //     })
        // },1000)
        this.loadMovieListByTypeAndPage()
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            isloading: true,
            nowPage: parseInt(nextProps.match.params.page) || 1,
            movieType: nextProps.match.params.type,
        }, function () {
            this.loadMovieListByTypeAndPage()
        })
    }

    render() {
        // console.log(this.props.match.params.type, this.props.match.params.page);
        return (
            <div>
                {this.getMovieList()}
            </div>
        )

    }

    loadMovieListByTypeAndPage = () => {
        const data = require('../test_data/' + this.state.movieType + '.json')
        // console.log(data);
        setTimeout(() => {
            this.setState({
                isloading: false,
                movies: data.subjects,
                total: data.total
            })
        }, 1000)
    }


    getMovieList = () => {
        if (this.state.isloading) {
            return (
                <Spin tip="Loading...">
                    <Alert
                        message="正在加载"
                        description="稍安勿躁"
                        type="info"
                    />
                </Spin>
            )
        } else {
            return (
                <div>
                    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                        {
                            this.state.movies.map(item => {
                                return <MovieItem {...item} key={item.id} history={this.props.history}></MovieItem>
                            })
                        }
                    </div>
                    <Pagination defaultCurrent={this.state.nowPage} pageSize={this.state.pageSize} total={this.state.total} onChange={this.changePage} />
                </div>
            )
        }
    }


    // 页数改变
    changePage = (page) => {
        // 通过操作BOM对象，实现跳转，不推荐；；；推荐使用路由进行编程式导航
        // window.location.href='/#/movie/'+this.state.movieType+'/'+page

        // 使用react-router-dom实现编程式导航
        this.props.history.push('/movie/'+this.state.movieType+'/'+page)
    }
}